﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>

    <meta name="viewport" content="width=device-width" />
    <title>职位管理</title>
    <link href="~/element-ui/element-ui/theme-chalk/index.css" rel="stylesheet" />
    <link href="~/lib/layui/css/layui.css" rel="stylesheet" />
    <script src="~/lib/layui/layui.js"></script>
    <script src="~/lib/jquery/dist/jquery-3.3.1.min.js"></script>
    <script src="~/js/vue.js"></script>
    <script src="~/element-ui/element-ui/element.js"></script>
    <script src="~/js/axios.min.js"></script>
</head>
<body>
    <br />
    <div id="app" class="layui-container">
        <h1>
            <el-tag>职位管理</el-tag>
        </h1>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="部门名称">
                <el-input placeholder="请输入姓名" v-model="job_Name" clearable>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @@click="cx()">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-circle-outline" @@click="dialogFormVisible = true">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)" stripe style="width: 100%">
            <el-table-column prop="job_ID" label="职位编号" width="100">
            </el-table-column>
            <el-table-column prop="job_Name" label="职位名称" width="150">
            </el-table-column>
            <el-table-column prop="department.depar_NAME" label="所属部门" width="150">
            </el-table-column>
            <el-table-column prop="state_ID" label="状态" width="150">
            </el-table-column>
            <el-table-column prop="email" label="电子邮箱" width="180">
            </el-table-column>
            <el-table-column prop="remarks" label="描述" width="150">
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" @@click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @@click="handleDelete(scope.row)">删除</el-button>

                    <el-dialog title="修改职位" :visible.sync="dialogFormxg" width="550px" top="5px">
                        <el-form label-position="left" :model="form1">
                            <el-form-item label="职位名称" :label-width="formLabelWidth">
                                <el-input v-model="form1.Job_Name" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="所属部门" :label-width="formLabelWidth">
                                <el-select v-model="form1.Depar_ID" placeholder="请选择部门">
                                    <el-option v-for="item in list2" :key="item.depar_ID" :label="item.depar_NAME" :value="item.depar_ID">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="状态" :label-width="formLabelWidth">
                                <el-select v-model="form1.state_ID" placeholder="请选择">
                                    <el-option v-for="item in status" :key="item.state_ID" :label="item.state_Name" :value="item.state_ID">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="邮箱" :label-width="formLabelWidth">
                                <el-input v-model="form1.email" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="备注" :label-width="formLabelWidth">
                                <el-input type="textarea" v-model="form1.remarks"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @@click="dialogFormxg = false">取 消</el-button>
                            <el-button type="primary"
                                       @@click="update">确 定</el-button>
                        </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination @@size-change="handleSizeChange"
                           @@current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[5, 10, 20, 30]"
                           :page-size="100"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="list.length">
            </el-pagination>
        </div>
        <el-dialog title="添加职位" :visible.sync="dialogFormVisible">
            <el-form label-position="left">
                <el-form-item label="职位名称" :label-width="formLabelWidth">
                    <el-input v-model="Job_Name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属部门" :label-width="formLabelWidth">
                    <el-select v-model="bm" placeholder="请选择部门">
                        <el-option v-for="item in list2" :key="item.depar_ID" :label="item.depar_NAME" :value="item.depar_ID">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-select v-model="zt" placeholder="请选择">
                        <el-option v-for="item in list3" :key="item.state_ID" :label="item.state_Name" :value="item.state_ID">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="remarks"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @@click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @@click="add()">提交</el-button>
            </div>
        </el-dialog>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                job_Name: null,
                list: [],
                list2: [],
                list3: [],
                status: [{ state_ID: 1, state_Name: '在职' }, { state_ID: 2, state_Name: '离职'}],
                currentPage: 1,
                pagesize: 5,
                total: null,
                formLabelWidth: '100px',
                dialogTableVisible: false,
                dialogFormVisible: false,
                Job_Name: "",
                bm: '',
                zt: '',
                email: '',
                remarks: '',

                dialogFormxg: false,
                form1: {
                    Job_ID: '',
                    Job_Name: '',
                    Depar_ID: '',
                    state_ID: '',
                    email: '',
                    remarks:''
                }
            },
            methods: {
                load() {
                    var parms = { Job_Name: this.job_Name }
                    axios.post("/System/SelPositions", parms).then(res => {
                        for (var i = 0; i < res.data.length; i++) {
                            if (res.data[i].state_ID == 1) {
                                res.data[i].state_ID = "在职";
                            } else {
                                res.data[i].state_ID = "离职";
                            }
                        }
                        this.list = res.data;
                    })
                },
                cx() {
                    var parms = { Job_Name: this.job_Name }
                    axios.post("/System/SelPositions", parms).then(res => {
                        console.log(res.data);
                        for (var i = 0; i < res.data.length; i++) {
                            if (res.data[i].state_ID == 1) {
                                res.data[i].state_ID = "在职";
                            } else {
                                res.data[i].state_ID = "离职";
                            }
                        }
                        this.list = res.data;
                    })
                },
                handleSizeChange(val) {
                    this.pagesize = val;
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    this.currentPage = val;
                    console.log(`当前页: ${val}`);
                },
                handleDelete(row) {
                    var params = { Job_ID: row.job_ID }
                    this.$confirm("你确定要删除吗？", '提示', {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        axios.post('/System/DelPosition', params).then(da => {
                            if (da.data == "1") {
                                this.$message({
                                    showClass: true,
                                    message: "删除成功",
                                    type: "success"
                                })
                                this.load();
                            } else {
                                this.$message.error("删除失败");
                            }
                        })
                    })
                }, depart() {
                    axios.get("/System/Selectdepartments").then(result => {
                        this.list2 = result.data;
                    })
                }, zts() {
                    axios.get("/System/SelectState").then(result => {
                        this.list3 = result.data;
                    })
                },
                add() {
                    var params = { Job_Name: this.Job_Name, Depar_ID: this.bm, state_ID: this.zt, email: this.email, remarks: this.remarks }
                    axios.post("/System/InsPosition", params).then(da => {
                        if (da.data == "1") {
                            this.$message({
                                showClass: true,
                                message: "添加成功",
                                type: "success"
                            })
                            this.load();
                        } else {
                            this.$message.error("添加失败");
                        }
                    })
                },
                handleEdit(index, row) {
                    this.dialogFormxg = true
                    this.form1.Job_ID = row.job_ID
                    this.form1.Job_Name = row.job_Name
                    this.form1.Depar_ID = row.depar_ID
                    this.form1.state_ID = row.state_ID
                    this.form1.email = row.email
                    this.form1.remarks = row.remarks
                },
                update() {
                    console.log(this.form1)
                    axios.post("/System/UpdatePosition", this.form1).then(res => {
                        if (res.data == 1) {
                            this.$message({
                                showClass: true,
                                message: "修改成功",
                                type: "success"
                            })
                            this.load();
                        } else {
                            this.$message.error("修改失败");
                        }
                    })
                }
            },
            created() {
                this.load();
                this.depart();
                this.zts();
            }
        })
    </script>
</body>
</html>
